<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        文章分类: <input type="text" v-model="searchConditions.category">

        发布状态: <input type="text" v-model="searchConditions.state">

        <button @click="search">搜索</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article, index) in articleList">
                <td>{{ article.title }}</td>
                <td>{{ article.category }}</td>
                <td>{{ article.time }}</td>
                <td>{{ article.state }}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <!--引入axios的js文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    articleList: [],
                    searchConditions: {
                        category: '',
                        state: ''
                    }
                }
            },
            // mounted 此处可以偶去所有文章的数据
            mounted() {
                axios.get('http://192.168.3.92:8080/article/getAll')
                    .then(result => {
                        //成功的回调 
                        //result代表的是服务器相应的所有数据 包括响应头 响应体 
                        //result.data代表的是响应的核心数据
                        console.log(result.data)
                        this.articleList = result.data
                    }).catch(err => {
                        //失败的回调
                        console.log(err)
                    })

            },
            methods: {
                search() {
                    axios.get('http://192.168.3.92:8080/article/search?category='
                        + this.searchConditions.category + "&state=" 
                        + this.searchConditions.state)
                    .then(result => {
                        //成功的回调 
                        //result代表的是服务器相应的所有数据 包括响应头 响应体 
                        //result.data代表的是响应的核心数据
                        console.log(result.data)
                        this.articleList = result.data
                    }).catch(err => {
                        //失败的回调
                        console.log(err)
                    })
                }
            }
        }).mount('#app')
    </script>
</body>

</html>